<template>
    <div>
        <!-- seach -->
        <div class="seach">
            <span>
                {{$t('bankcode')}}
                <el-input v-model.trim="bankListForm.bankCode" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <span class="seachStatus">
                {{$t('bankname')}}
                <el-input v-model.trim="bankListForm.bankName" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <el-button type="primary" @click="seachbank" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
            <el-button type="warning" @click="showAddBank" size="mini" v-preventReClick>{{$t('add')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="banklistTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="roleName" :label="$t('chnnumber')">
                </el-table-column>
                <el-table-column prop="roleCode" :label="$t('chnlnam')">
                </el-table-column>
                <el-table-column prop="status" :label="$t('product')">
                </el-table-column>
                <el-table-column prop="status1" :label="$t('bankcode')">
                </el-table-column>
                <el-table-column prop="status2" :label="$t('bankname')">
                </el-table-column>
                <el-table-column prop="status3" :label="$t('abbreviation')">
                </el-table-column>
                <el-table-column prop="status4" :label="$t('engabbreviation')">
                </el-table-column>
                <el-table-column prop="status5" :label="$t('bankcdtp')">
                </el-table-column>
                <el-table-column prop="status6" :label="$t('jointlinenum')">
                </el-table-column>
                <el-table-column prop="status7" :label="$t('singleminimumamount')">
                </el-table-column>
                <el-table-column prop="status8" :label="$t('singlemaximumamt')">
                </el-table-column>
                <el-table-column prop="status9" :label="$t('creatime')">
                </el-table-column>
                <el-table-column prop="status0" :label="$t('modtim')" width="100">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="100">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showEditBank(scope.row)">{{$t('mdfy')}}</el-link>
                        <el-link type="primary" @click="showRemoveBank(scope.row)">{{$t('dlte')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- paging -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="bankListForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="bankListForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :pager-count="5">
            </el-pagination>
        </el-card>
        <!-- 修改弹框 -->
        <!-- <el-dialog title="修改" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editRoleForm)" :close-on-click-modal='isOk'>
            <el-form :ref="editRoleForm" :rules="editRoleRul" :model="editRoleForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item label="角色名" prop="roleName">
                    <el-input v-model="editRoleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色值" prop="roleCode">
                    <el-input v-model="editRoleForm.roleCode"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="editRoleForm.status" class="sellong">
                        <el-option label="- 请选择 -" value="null"></el-option>
                        <el-option label="生效" value="VALID"></el-option>
                        <el-option label="失效" value="INVALID"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editRole(addRoleForm)">确 定</el-button>
                <el-button @click="editDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog> -->
    </div>
</template>

<script>
export default {
    data () {
        return {
            total: 0,
            bankListForm: {
                bankCode: null,
                bankName: null,
                pageSize: 10,
                pageNum: 1
            },
            banklistTab: []
        }
    },
    methods: {
        getBankList () {},
        showAddBank () {},
        seachbank () {
            this.getBankList()
        },
        showEditBank () {},
        showRemoveBank () {},
        handleSizeChange (newSize) {
            this.role.pageSize = newSize
            this.seachRole()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.role.pageNum = newNum
            window.localStorage.setItem('curpage', newNum)
            this.seachRole()
        }
    },
    mounted () {
        this.getBankList()
    }
}
</script>

<style lang="less" scoped>
@import './bankList.less';
</style>
